import React, { Component } from 'react'

import styled from 'styled-components';

import getIcon from '../MyIcon';
import { Icon, Switch } from 'antd';

const Container = styled.section`
  width: 100%;
  height: ${props => props.height};
  border: ${props => props.bordered === 'true' ? '1px solid #DEE1E7' : '0'};
  border-radius: ${props => `$${props.radius || props.radius === 0 ? props.radius : 4}px`};
`

const Header = styled.section`
  background: rgba(214, 236, 253, 1);
  height: 40px;
  line-height: 40px;
  text-align: start;
  padding: 0 25px;
  color: #000;
  font-size: 16px;
  border-bottom: 1px solid #AEC7D9;
  border-radius: ${props =>
    `${props.radius || props.radius === 0 ? props.radius : 4}px $${props.radius || props.radius === 0 ? props.radius : 4}px 0 0`
  };
`

export const Headers = styled.section`
  background: #D6ECFD;
  height: 40px;
  line-height: 40px;
  text-align: start;
  padding: 0 25px;
  margin-bottom: 30px;
  color: #000;
  font-size: 16px;
  border-bottom: 1px solid #AEC7D9;
`

const Content = styled.section`
  padding: ${props => props.type === 'small' ? '10px' : (props.type === 'none' ? '0px' : '40px')};
  background: #fff;
  height: calc(100% - 40px);
  border-radius: ${props => `0 0 $${props.radius || props.radius === 0 ? props.radius : 4}px $${props.radius || props.radius === 0 ? props.radius : 4}px`};
`

interface Props {
  WrapperComponent?;
  icon?: string;
  title?: string;
  hasIcon?: boolean;
  type?: 'small' | 'default' | 'none';
  bordered?: boolean;
  height?: string;
  radius?: number;
}

const Divider = ({
  WrapperComponent,
  icon,
  title,
  hasIcon,
  type = "default",
  bordered = false,
  height = '100%',
  radius = 4
}: Props) => {
  class Item extends Component {

    state = {
      isShow: true
    }

    render() {

      const { isShow } = this.state;

      return (
        <Container bordered={bordered.toString()} height={height} radius={radius}>
          <Header radius={radius}>
            {icon && getIcon(icon)}
            {title && <span> {title} </span>}
            {hasIcon && <Icon type={isShow ? "caret-right" : "caret-down"} onClick={() => this.setState({ isShow: !isShow })} />}
          </Header>
          {
            WrapperComponent && (!hasIcon || isShow) && (
              <Content radius={radius} type={type} style={{ visibility: `${(!hasIcon || isShow) ? 'visible' : 'collapse'}` }}>
                <WrapperComponent {...this.props} />
              </Content>
            )
          }
        </Container>

      )
    }
  }
  return Item;
}

const FormDivider = (icon?, title?, isShow?, switchOnChange?) => {
  class Item extends Component {
    render() {
      return (
        <Headers>
          {icon && getIcon(icon)}
          {title && <span> {title} </span>}
          <Switch style={{ marginLeft: 20 }} checked={isShow} onChange={switchOnChange} />
        </Headers>
      )
    }
  }
  return Item;
}

const DividerItem = (icon?, title?, hasIcon?, isShow?, handleShow?) => {
  class Item extends Component {
    render() {
      return (
        <Headers>
          {icon && getIcon(icon)}
          {title && <span> {title} </span>}
          {hasIcon && (isShow
            ? <Icon type="caret-down" onClick={() => handleShow(false)} />
            : <Icon type="caret-right" onClick={() => handleShow(true)} />)
          }
        </Headers>
      )
    }
  }
  return Item;
}

export {
  FormDivider,
  DividerItem
}

export default Divider;